<!--
 * @description  : 市管-检查情况
 * @descriptionDetail: 市管-检查情况
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <view class="tabsBottom">
        <u-sticky>
          <u-cell-group class="sticky-header">
            <u-cell-item icon="calendar" title="开始/结束日期" :value="rangeDate" :arrow="true" @tap="dateRange=true">
            </u-cell-item>
          </u-cell-group>
        </u-sticky>
        <me-table
          :i="0"
          :index="0"
          :top="90"
          :load-data="loadData"
          :init-load="true" 
          ref="mescrollItem0"
        > 
          <u-card
            :title="d.data.checkType"
            title-color="#333"
            :sub-title="d.data.checkResult == 1 ? '异常' : '正常'"
            sub-title-color="#666"
            :sub-title-size="30"
            :head-style="headStyle"
            margin="20rpx"
            thumb="../../static/check/pending-approval.png"
            thumb-width="38"
            box-shadow="#e5e5e5 0px 0px 50px"
            slot-scope="d"
          >
            <view class="" slot="body">
              <u-row gutter="16">
                <u-col span="12">
                  核查人：{{ d.data.personName }}
                </u-col>
                <u-col span="12">
                  签到时间：{{ d.data.signInTime }}
                </u-col>
                <u-col span="12">
                  签离时间：{{ d.data.submitTime }}
                </u-col>
              </u-row>
            </view>
          </u-card>
        </me-table>
      </view>
    </view>
    <u-calendar mode="range" max-date="2099-12-31" v-model="dateRange" @change="handlerSearchDate"></u-calendar>
  </view>
</template>

<script> 
import meTable from '@/components/me-table.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import checkService from "@/service/check/check.service"
import {dateUtils,} from "@/common/util"
export default {
  components: { 
    meTable,
  },
  mixins: [MescrollMoreMixin,],
  data() {
    return {
      user: this.$storage.get(this.$rp.common.USER),
      dateRange: false,
      rangeDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())) + "至" + dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),
      startDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())),
      endDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.lastDate(new Date())),
      isOpen: false,
      keyword: "",
      background: {
        background: "#fff",
      },
      headStyle: {
        fontWeight: 600,
      },
      retailerUuid: "",  // 零售户uuid
      isHaveLicense: null,  // 是否有证户
    };
  },
  onLoad(options) {
    this.retailerUuid = options.retailerUuid;
    this.isHaveLicense = options.isHaveLicense;
  },
  methods: {
    loadData(page) {
      return checkService.retailerCheckHis(page.num, page.size,
        {retailerUuid: this.retailerUuid, isHaveLicense: this.isHaveLicense, startDate: this.startDate, endDate: this.endDate,});
    },
    // 日期区间查询条件
    handlerSearchDate(d) {
      this.startDate = d.startDate;
      this.endDate = d.endDate;
      this.rangeDate = d.startDate + "至" + d.endDate;
      this.$refs["mescrollItem0"].refresh(); 
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";
.content {
  background-color: #FFF;
}
.sticky-header {
  position: fixed;
  /* #ifdef H5-DINGDING  */
  top: 0px;
  /* #endif */
  /* #ifndef H5-DINGDING  */
  top: 40px;
  /* #endif */
  width: 100%;
  z-index: 999;
}
/deep/ .u-tabbar__content__item__text {
  font-size: 15px;
}
</style>
